<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <title>Create a comment log for your group</title>
    <script
      src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAALTdx9qjrdl_2yO4uD4jnWxQ_6N4dkHg7_wIKENxVG1go3UnpWxRwWZP6VSh5aDY53HnYXQe1FQQEGw" type="text/javascript"></script>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
    <link rel="icon" href="favicon.ico" type="image/x-icon">
  </head>
  <body onunload="GUnload()">
    <center>
      <h2>Promote communication within your organization or group.</h2>
    </center>
    {% if mapdefined %} 
    Go to <a href="/add_map?place={{place}}"> {{place }} map</a>
    <br />
    {% endif %}


    <table>
      <tr><td bgcolor="Aqua">
    <script type="text/javascript">
      //<![CDATA[

      var place_name = '{{place|addslashes}}';
      var user_name = '{{user}}';

      // extract colors from template_value color
      var colors = '';
      {% for s in color%}
      var tempindex = '{{forloop.counter0}}' ; 
      colors = colors + '{{s}} ' ; 
      {% endfor %}
      if ('' == colors){colors = "ff0000 ffff00"};

      // extract categories from template_value category
      var categories = '';
      {% for s in category%}
      var tempindex = '{{forloop.counter0}}' ; 
      categories = categories + '{{s}} ' ; 
      {% endfor %}
      if ('' == categories){categories = "typical special"};

    
      var iwform = 'Enter your group\'s information:<br>'
        + '<form onsubmit="process(this); return false" action="#">'
        + 'Group Name or Initials: '
        + '<strong>' + place_name + '</strong>'
        + '<br />'
        + 'People'
        + '  <input type="text" name="people" value="{{ people|default:"do-gooders"}}" id="idinput" size="31" maxlength="31"/>'
        + '<br />'
        + 'Activity'
        + '  <input type="text" name="activity" value="{{ activity|default:"know"}}" size="31" maxlength="31"/>'
        + '<br />'
        + 'Contact'
        + '  <input type="text" name="contact" value="{{contact|default:"schott DOT bee are eye eh en AT gee em ae eye el DOT com"}}" size="31" maxlength="91"/>'
        + '<br />'
        + 'Comment categories (space separated)'
        + '  <input type="textarea" name="categories" value="' +categories+ '" size="31" maxlength="91"/>'
        + '<br />'
        + 'Comment colors (space separated)'
        + '  <input type="textarea" name="colors" value="' +colors+ '" size="31" maxlength="91"/>'
        + '<br />'
        + 'More information'
        + '  <input type="textarea" name="moreinfo" value="{{ moreinfoLog|default:"This is important"}}" size="31" maxlength="291"/>'
        + '  <input type="hidden" name="place_name"/>'
        + '  <input type="submit" value="Submit" />'
        + '<\/form>';

document.write(iwform);
    </script>


        </td>
        </tr>
      <tr><td bgcolor="Lime"> 
          <p>
          You can revise all of the entries you make at a later time, so 
          do not be worried. The categories you supply for the messages or
          comments people make will each have an associated color, so be 
          careful to have an equal number of categories and colors. 
          The system requires at least one category and color.
          Some common colors and their codes can be seen at the bottom
          of this page.
          </p>
          <p>Click the "submit" button if everything looks right. If not,
          you may start over by reloading the page.  </p>

          <p>
          Here are a few details you may want to know.
          </p>
          <p>
          If you press the "return" key while you are filling in the form,
           that is like pressing the "submit" button.
          </p>
          <p>
          There is a "More information" input field for you to give additional
          instructions to your group. If you want to encourage your people to
          include their phone numbers in their information, you may want to
          suggest that they disguise the numbers as characters using a format
          like the one in the graphic supplied here. 

          </p>
          <img src="phonedial.png" width="127" height="141" /> 
          <p>
          The phonedial image could be used to recommend a way for your 
          map users to code their (phone) numbers if it is essential that 
          you recommend leaving numbers in their information. 
          
          
          </p>
          <p>
          <tt>schott DOT bee are eye eh en AT gee em ae eye el DOT com</tt></p>
        </td>
        <td valign="top">

          <!--a href="/logowner?place={{place}}">Add or delete comments on your log page now or later</a-->
          <!--brian remember to change the "alert" message when you uncomment this-->


        </td>
      </tr>
      <table>
        <tr bgcolor="Aqua">
          <th><font color="blue">*</font>Color</th>
          <th>Hexadecimal</th>
          <th>Color</th>
          <th>Hexadecimal</th>
          <th>Color</th>
          <th>Hexadecimal</th>
          <th>Color</th>
          <th>Hexadecimal</th>
        </tr>
        <tr>
          <td>aqua</td>
          <td style="background:#0FF; color:#000; font-family:monospace;">#00FFFF</td>
          <td>gray</td>
          <td style="background:#808080; color:#FFF; font-family:monospace;">#808080</td>
          <td>navy</td>
          <td style="background:#000080; color:#FFF; font-family:monospace;">#000080</td>
          <td>silver</td>
          <td style="background:#C0C0C0; color:#000; font-family:monospace;">#C0C0C0</td>
        </tr>
        <tr>
          <td>black</td>
          <td style="background:#000; color:#FFF; font-family:monospace;">#000000</td>
          <td>green</td>
          <td style="background:#008000; color:#FFF; font-family:monospace;">#008000</td>
          <td>olive</td>
          <td style="background:#808000; color:#FFF; font-family:monospace;">#808000</td>
          <td>teal</td>
          <td style="background:#008080; color:#fff; font-family:monospace;">#008080</td>
        </tr>
        <tr>
          <td>blue</td>
          <td style="background:#00F; color:#FFF; font-family:monospace;">#0000FF</td>
          <td>lime</td>
          <td style="background:#0F0; color:#000; font-family:monospace;">#00FF00</td>
          <td>purple</td>
          <td style="background:#800080; color:#FFF; font-family:monospace;">#800080</td>
          <td>white</td>
          <td style="background:#FFF; color:#000; font-family:monospace;">#FFFFFF</td>
        </tr>
        <tr>
          <td>fuchsia</td>
          <td style="background:#F0F; color:#000; font-family:monospace;">#FF00FF</td>
          <td>maroon</td>
          <td style="background:#800000; color:#FFF; font-family:monospace;">#800000</td>
          <td>red</td>
          <td style="background:#F00; color:#FFF; font-family:monospace;">#FF0000</td>
          <td>yellow</td>
          <td style="background:#FF0; color:#000; font-family:monospace;">#FFFF00</td>
        </tr>
      </table>
    </table>


    <script type="text/javascript">
      //<![CDATA[

    if (GBrowserIsCompatible()) {

      function whenReady( id, callback ) {
        var interval = setInterval( function() {
            var element = document.getElementById( id );
            if( element ) {
            clearInterval( interval );
            callback( element );
            }
            }, 10 );
      }

      function process(form) {
        var people = form.people.value;
        var contact = form.contact.value;
        var moreinfo = form.moreinfo.value;
        var activity = form.activity.value;
        var categories = form.categories.value;
        var colors = form.colors.value;
        var url = "/add_lognext?place="+place_name+"&people="+people+"&contact="+contact+"&moreinfoLog="+moreinfo+"&categories="+categories+"&colors="+colors+"&activityLog="+activity;
        // GLog.write("About to send "+url+ " to the server"); 

        // ===== send the data to the server
        GDownloadUrl(url, function(doc) { 
            });  

        alert("Your log page has been created or editted. You and your group can use it at the address (URL) in your browser. Be sure to BOOKMARK this page and distribute the URL to your group. To sign out and see the log you created, return to our home page.");
        return true;
      }



        // display a warning if the browser was not compatible
      } else {
        alert("Sorry, the Google Maps API is not compatible with this browser");
      }

      //]]>
    </script>
  </body>

</html>
